<template>
    <el-breadcrumb class="app-breadcrumb" separator="/">
        <transition-group name="breadcrumb">
            <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title">
                <span v-if="item.redirect==='noredirect' || index == levelList.length - 1">{{item.meta.title}}</span>
                <router-link v-else :to="item.redirect || item.path">{{item.meta.title }}</router-link>
            </el-breadcrumb-item>
        </transition-group>
    </el-breadcrumb>
</template>
<script>
export default {
    name: "Test",
    data() {
        return {
            levelList: [
                {
                    path: '/jack1',
                    meta: {
                        title: '页面1'
                    }
                },
                {
                    path: '/jack2',
                    meta: {
                        title: '页面2'
                    }
                },
                {
                    path: '/jack3',
                    meta: {
                        title: '页面3'
                    }
                },
            ]
        };
    },
    created() {
        console.log('created');
        this.getBreadcrumb();
    },
    watch: {
        // 监听路由的变化
        $route() {
            console.log('监听路由变化');
            this.getBreadcrumb();
        }
    },
    methods: {
        getBreadcrumb() {
            //console.log('打印当前路由信息');
            //console.log(this.$route);
            // 将首页路径拼接在路由前面
            let matched = this.$route.matched.filter(item => item.name);
            console.log(matched);
            const first = matched[0];
            if (first && first.name !== 'home') {
                matched = [{path: '/home', meta: {title: '首页'}}].concat(matched);
            }
            console.log(matched);
            this.levelList = matched;
            //console.log(matched);
        }
    }
}
</script>
<style>
    .app-breadcrumb.el-breadcrumb{
        display: inline-block;
        font-size: 14px;
        line-height: 50px;
        margin-left: 10px;
    }
</style>